const CLASSNAME = 'player-flyout-show'

export function usePlayerFlyout(containerRef, classname = CLASSNAME) {
  let showTimer = null
  let hideTimer = null
  const classList = computed(() => toValue(containerRef)?.classList)

  // TODO 根据onlyTouchMode判断延迟时间

  function clearTimer(hide) {
    showTimer && clearTimeout(showTimer) && (showTimer = null)
    hideTimer && clearTimeout(hideTimer) && (hideTimer = null)

    hide && classList.value?.remove(classname)
  }

  function mouseenter() {
    clearTimer()
    showTimer = setTimeout(() => classList.value?.add(classname), 300)
  }

  function mouseleave() {
    showTimer = setTimeout(() => clearTimer(true), 300)
  }

  return {
    mouseenter,
    mouseleave,
    clearTimer
  }
}
